{% extends "top.html" %}

{% block title %}{{ movie.vod_name }} - 影视中心{% endblock %}

{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/movie.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/movie_detail.css') }}">
{% endblock %}

{% block page_title %}影视中心{% endblock %}

{% block content %}
<div class="movie-detail-container">
       
    <!-- 播放区域 -->
    <div class="movie-play-section">
        <h2>在线播放</h2>
        <div id="play_url" style="display: none;">{{playurl }}</div>
        <!-- 播放器 -->
        <div id="player-container" class="player-container">
            {% if current_url %}
            <iframe id="player-iframe" src="" frameborder="0" allowfullscreen></iframe>
            {% else %}
            <div class="no-player">
                <p>请选择剧集开始播放</p>
            </div>
            {% endif %}
        </div>
        
        <!-- 剧集列表 -->
        <div class="episode-list">
            <h3>剧集列表</h3>
            <div class="episodes">
                {% if play_list %}
                {% for episode in play_list %}
                <a href="javascript:void(0)" 
                   data-url="{{ episode.url }}"
                   class="episode-item {% if episode.index == current_episode %}active{% endif %}"
                   onclick="playEpisode(this, '{{ episode.url }}')">
                   {{ episode.name }}
                </a>
                {% endfor %}
                {% else %}
                <p class="no-episodes">暂无可播放剧集</p>
                {% endif %}
            </div>
        </div>
    </div>

     <!-- 影片信息 -->
     <div class="related-movies" style="margin-bottom: 0px">
        <h2>影片信息</h2>
     </div>
     <div class="movie-info-section">
        <div class="movie-poster-large">
            <img src="{{ movie.vod_pic|default(url_for('static', filename='images/error.png'), true) }}" 
                 alt="{{ movie.vod_name }}"
                 onerror="">
            <span class="movie-score">{{ movie.vod_score }}</span>
        </div>
        
        <div class="movie-details">
            <h1 class="movie-title">{{ movie.vod_name }}</h1>
            
            <div class="movie-meta-info">
                <p><span>类型:</span> {{ movie.type_name }}</p>
                <p><span>年份:</span> {{ movie.vod_year }}</p>
                <p><span>地区:</span> {{ movie.vod_area }}</p>
                <p><span>状态:</span> {{ movie.vod_remarks }}</p>
                <p><span>更新:</span> {{ movie.vod_time }}</p>
                <p><span>导演:</span> {{ movie.vod_director }}</p>
                <p><span>演员:</span> {{ movie.vod_actor }}</p>
            </div>
            
            <div class="movie-description">
                <h3>剧情简介</h3>
                <p>{{ movie.vod_content|default('暂无简介', true) }}</p>
            </div>
        </div>
    </div>
    
    <!-- 相关推荐 -->
    <div class="related-movies">
        <h2>相关推荐</h2>
        
        {% if related_movies %}
        <div class="movie-grid small">
            {% for related in related_movies %}
            <div class="movie-item">
                <a href="/movie/detail/{{ related.vod_id|int }}?name={{currentname}}">
                    <div class="movie-poster">
                        <img src="{{ related.vod_pic|default(url_for('static', filename='images/error.png'), true) }}" 
                             alt="{{ related.vod_name }}"
                             onerror="">
                        <span class="movie-remarks">{{ related.vod_remarks }}</span>
                    </div>
                    <div class="movie-info">
                        <h3 class="movie-title">{{ related.vod_name }}</h3>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="no-related">暂无相关推荐</p>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化播放器
    const episodeLinks = document.querySelectorAll('.episode-item');
    let currentUrl = '';

    // 检查是否有剧集，若有则获取第一集的URL
    if (episodeLinks.length > 0) {
        currentUrl = episodeLinks[0].getAttribute('data-url');
        episodeLinks[0].classList.add('active');
    }
    // const currentUrl = "{{ current_url|default('', true) }}";
    if (currentUrl) {
        tryToPlay(currentUrl);
    }
});

function playEpisode(element, url) {
    // 更新激活状态
    const episodeLinks = document.querySelectorAll('.episode-item');
    episodeLinks.forEach(link => link.classList.remove('active'));
    element.classList.add('active');
    
    // 播放视频
    tryToPlay(url);
}

function tryToPlay(url) {
    const playerContainer = document.getElementById('player-container');
    console.log("尝试播放URL:", url);
    
    const play_url = document.getElementById('play_url').innerText;

    playurl = play_url + url
    
    // 清除现有内容
    playerContainer.innerHTML = '';
    
    // 创建新的iframe
    const iframe = document.createElement('iframe');
    iframe.id = 'player-iframe';
    iframe.frameBorder = '0';
    iframe.allowFullscreen = true;
    iframe.src = playurl;
    
    // 添加事件监听
    iframe.onerror = function() {
        console.error("播放器加载失败");
        showPlayError();
    };
    
    // 添加到容器
    playerContainer.appendChild(iframe);
    
    // 备用:尝试直接打开链接
    // if (url.includes('m3u8')) {
    //     const linkContainer = document.createElement('div');
    //     linkContainer.className = 'direct-link-container';
    //     linkContainer.innerHTML = `
    //         <div class="direct-link-info">
    //             <p>如果播放器无法加载，您可以尝试:</p>
    //             <a href="${url}" target="_blank" class="direct-link">直接打开视频链接</a>
    //             <p class="small-tip">(支持m3u8播放的播放器或浏览器插件)</p>
    //         </div>
    //     `;
    //     playerContainer.appendChild(linkContainer);
    // }
}

function showPlayError() {
    const playerContainer = document.getElementById('player-container');
    playerContainer.innerHTML = `
        <div class="play-error">
            <p>视频播放失败，请尝试其他剧集或稍后再试</p>
        </div>
    `;
}
</script>
{% endblock %} 